<template>
    <view class="container">
        <view class="header">
            <image src="/static/img/shezhitubiao.png" class="logo"></image>
            <text class="title">山水 v1.0.0</text>
            <text class="company">厦门巨虎网络科技有限公司版权所有</text>
        </view>

        <view style="padding: 20px">
            <view class="info-section">
                <view class="info-item">
                    <text class="info-title">绑定手机号</text>
                    <text class="info-value">
                        {{ isPhoneBound ? items[0].phone : '未绑定' }}
                        <ant-icon onTap="handleTap" data-id="icon" type="RightOutline" style="font-size: 15px" />
                    </text>
                </view>
                <view class="info-item">
                    <text class="info-title">客服电话</text>
                    <text class="info-value">40000-40000转3</text>
                </view>
                <view class="info-item">
                    <text class="info-title">官方网站</text>
                    <text class="info-value">www.youting.com</text>
                </view>
            </view>

            <view class="policy-section">
                <view class="policy-item" onTap="openUserAgreement">
                    <text>用户协议</text>
                </view>
                <view class="policy-item" onTap="openPrivacyPolicy">
                    <text>隐私条款</text>
                </view>
            </view>

            <view class="toggle-section">
                <text>签到弹窗提醒</text>
                <switch :checked="true"></switch>
            </view>

            <view class="logout-section">
                <button @tap="logout">退出登录</button>
            </view>
        </view>
    </view>
</template>

<script>
	import {
		ref,
		onMounted
	} from 'vue';
	import {
		onShow,
		onLoad
	} from '@dcloudio/uni-app';
	import {
		onPullDownRefresh,
		onReachBottom
	} from "@dcloudio/uni-app";
	
export default {
    components: {
       
    },
    data() {
        return {
            items: [
                {
                    phone: 15214547473
                }
            ],

            isPhoneBound: false
        };
    },
    methods: {
        openUserAgreement() {
            uni.alert({
                title: '用户协议',
                content: '用户协议内容...'
            });
        },

        openPrivacyPolicy() {
            uni.alert({
                title: '隐私条款',
                content: '隐私条款内容...'
            });
        },

        logout() {
            uni.confirm({
                title: '确认退出',
                content: '您确定要退出登录吗？',
                success: (result) => {
                    if (result.confirm) {
                        uni.showToast({
                            content: '已退出登录',
                            type: 'success'
                        });
                    }
                }
            });
        },

        handleTap(e) {
            this.setData({
                isPhoneBound: true
            });
        }
    }
};
</script>
<style>
.header {
    text-align: center;
    height: 240px;
    background: url('../../../static/img/dhrxhi.jpg');
}

.logo {
    display: flex;
    width: 100px;
    height: 100px;
    position: relative;
    top: 40px;
    left: 140px;
}

.title {
    display: flex;
    font-size: 24px;
    font-weight: bold;
    position: relative;
    top: 50px;
    left: 130px;
}

.company {
    display: flex;
    font-size: 14px;
    color: #888;
    margin-top: 5px;
    width: 100%;
    position: relative;
    top: 50px;
    left: 80px;
}

.info-section,
.policy-section,
.toggle-section,
.logout-section {
    margin-top: 20px;
}

.info-item,
.policy-item {
    display: flex;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px solid #eee;
}

.info-title {
    font-size: 16px;
}

.info-value {
    font-size: 16px;
    color: #888;
}

.toggle-section {
    display: flex;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px solid #eee;
}

.logout-section {
    text-align: center;
    margin-top: 20px;
}

.button {
    background-color: #ff4d4f;
    color: white;
    padding: 10px 20px;
    border-radius: 5px;
}
.box-image {
    width: 100%;
    height: 240px;
}
.custom-color {
    color: blue;
}
.custom-size {
    font-size: 40px;
}
.custom {
    font-size: 40px;
    color: red;
    margin: 10px;
}

</style>
